<template>
  <div class="container">
    <!-- Tabs导航 -->
    <div class="tabs">
      <button 
        :class="['tab-button', { active: activeTab === 'home' }]"
        @click="activeTab = 'home'"
      >主场信息</button>
      <button 
        :class="['tab-button', { active: activeTab === 'away' }]"
        :style="{ background: activeTab === 'away' ? '#67c23a' : '' }"
        @click="activeTab = 'away'"
      >客场信息</button>
    </div>

    <!-- 主队信息 -->
    <div v-show="activeTab === 'home'" class="team-section">
      <div class="team-header">
        <h2>主场球队</h2>
        <input type="file" @change="handleLogoUpload('home', $event)" accept="image/*">
      </div>
      <img v-if="homeTeam.logo" :src="homeTeam.logo" class="team-logo">
      <input v-model="homeTeam.name" placeholder="球队名称" class="team-name-input">
      
      <h3>球员列表（主队）</h3>
      <div class="player-list">
        <div class="table-header">
          <span class="position">位置</span>
          <span class="name">姓名</span>
          <span class="number">号码</span>
        </div>
        <div 
          v-for="(player, index) in homeTeam.players" 
          :key="index" 
          class="player-item"
        >
          <select v-model="player.position" class="position-select">
            <option v-for="pos in positions" :value="pos" :key="pos">{{ pos }}</option>
          </select>
          <input v-model="player.name" class="name-input">
          <div class="number-wrapper">
            <input v-model="player.number" type="number" class="number-input">
			<u-icon v-if="homeTeam.players.length > 5"
              @click="removePlayer('home', index)" name="minus-circle" color="red" size="48"></u-icon>
          </div>
        </div>
      </div>
      <button @click="addPlayer('home')" class="add-button home">+ 添加主队球员</button>
    </div>

    <!-- 客队信息 -->
    <div v-show="activeTab === 'away'" class="team-section">
      <div class="team-header">
        <h2>客场球队</h2>
        <input type="file" @change="handleLogoUpload('away', $event)" accept="image/*">
      </div>
      <img v-if="awayTeam.logo" :src="awayTeam.logo" class="team-logo">
      <input v-model="awayTeam.name" placeholder="球队名称" class="team-name-input">
      
      <h3>球员列表（客队）</h3>
      <div class="player-list">
        <div class="table-header">
          <span class="position">位置</span>
          <span class="name">姓名</span>
          <span class="number">号码</span>
        </div>
        <div 
          v-for="(player, index) in awayTeam.players" 
          :key="index" 
          class="player-item"
        >
          <select v-model="player.position" class="position-select">
            <option v-for="pos in positions" :value="pos" :key="pos">{{ pos }}</option>
          </select>
          <input v-model="player.name" class="name-input">
          <div class="number-wrapper">
            <input v-model="player.number" type="number" class="number-input">
			<u-icon v-if="awayTeam.players.length > 5"
              @click="removePlayer('away', index)" name="minus-circle" color="red" size="48"></u-icon>
          </div>
        </div>
      </div>
      <button @click="addPlayer('away')" class="add-button away">+ 添加客队球员</button>
    </div>


    <!-- 比赛信息 -->
    <div class="match-info">
      <u-cell-group title="">
        <u-cell-item title="比赛时间" :arrow="false">
			<uni-datetime-picker 
				type="datetime" 
				v-model="matchInfo.time" 
				@change="changeLog"
			/>
        </u-cell-item>
        <u-cell-item title="比赛地点" :arrow="false">
          <u-input 
            v-model="matchInfo.location" 
            placeholder="请输入比赛地点"
            border="none"
			style="margin-left: 10px;"
          ></u-input>
        </u-cell-item>
      </u-cell-group>
    </div>

	<!-- 底部占位元素 -->
	<div style="height:60px"></div>

    <!-- 固定在底部的提交按钮 -->
    <div class="fixed-footer">
      <u-button 
        type="primary" 
        shape="circle" 
        @click="handleSubmit"
        class="submit-btn"
      >创建比赛</u-button>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, computed } from 'vue';

const activeTab = ref('home');
const positions = ['控卫', '分卫', '小前', '大前', '中锋'];
// 比赛信息
const matchInfo = reactive({
  time: Date.now(),
  location: ''
});
const datetimesingle = ref(Date.now());

const changeLog = (e) => {
  console.log('选择的日期时间:', e);
  // 这里可以将值赋给 matchInfo.time
  matchInfo.time = e;
};

// 球队信息
const createDefaultPlayers = () => positions.map(pos => ({
  position: pos,
  name: '',
  number: null
}));

const homeTeam = reactive({
  logo: '',
  name: '',
  players: createDefaultPlayers()
});

const awayTeam = reactive({
  logo: '',
  name: '',
  players: createDefaultPlayers()
});

// 提交处理
const handleSubmit = () => {
  if (!validateForm()) return;
  
  const formData = {
    home: { ...homeTeam },
    away: { ...awayTeam },
    match: { ...matchInfo }
  };
  console.log('提交数据:', formData);
  uni.showToast({
    title: '创建成功',
    icon: 'success'
  });
};

// 表单验证
const validateForm = () => {
  if (!homeTeam.name || !awayTeam.name) {
    uni.showToast('请填写球队名称');
    return false;
  }
  if (!matchInfo.location) {
    uni.showToast('请填写比赛地点');
    return false;
  }
  return true;
};

const addPlayer = (team) => {
  const target = team === 'home' ? homeTeam : awayTeam;
  target.players.push({
    position: '控卫',
    name: '',
    number: null
  });
};

const removePlayer = (teamType, index) => {
  const team = teamType === 'home' ? homeTeam : awayTeam;
  if (team.players.length > 5) {
    team.players.splice(index, 1);
  } else {  
    uni.showToast('至少需要5个球员');
  }
};

const handleLogoUpload = (team, event) => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      team === 'home' 
        ? homeTeam.logo = e.target.result
        : awayTeam.logo = e.target.result;
    };
    reader.readAsDataURL(file);
  }
};
</script>

<style scoped>
/* 原有样式保持不变 */
body{
  padding-bottom: 70px;
}

.container {
  padding: 20px 15px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 新增比赛信息样式 */
.match-info {
  margin: 20px 0;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 底部固定按钮 */
.fixed-footer {
  height: 40px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  z-index: 100;
}

.submit-btn {
  width: 100%;
  height: 48px;
  font-size: 16px;
}

.tabs {
  display: flex;
  gap: 10px;
  height: 50px;
  margin-bottom: 20px;
  align-items: center;
  justify-content: center;
}

.tab-button {
  border: none;
  border-radius: 8px;
  background: #f0f0f0;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
  position: relative;
  padding: 8px 20px;
}

.tab-button.active {
  background: #409eff;
  color: white;
}

.team-section {
  width: 100%;
  max-width: 100vw;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.team-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.team-logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin: 10px 0;
  border: 1px solid #eee;
}

.player-list {
  margin-top: 15px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overflow-x: overlay;
}

.table-header {
  display: grid;
  grid-template-columns: 100px 120px 140px;
  width: fit-content;
  gap: 15px;
  margin: 15px 0 10px;
  padding: 8px 15px;
  border-bottom: 2px solid #eee;
  font-weight: 600;
  color: #666;
}

.player-item {
  display: grid;
  grid-template-columns: 100px 120px 140px;
  width: fit-content;
  gap: 15px;
  margin: 8px 0;
  padding: 0 15px;
  align-items: center;
}

.position-select,
.name-input,
.number-input {
  height: 36px;
  padding: 8px 12px;
  line-height: 1.5;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.position-select {
  width: 100%;
  background: white;
}

.name-input {
  width: 120px !important;
}

.number-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 80px; /* 保持与表头宽度一致 */
}

.number-input {
  width: 80px !important;
  flex-shrink: 0; /* 防止输入框被压缩 */
}

.add-button {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 6px;
  font-weight: 500;
}

.add-button.home { background-color: #409eff; color: white; }
.add-button.away { background-color: #67c23a; color: white; }

.team-name-input {
  width: 260px;
  padding: 8px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
}

@media (max-width: 480px) {
  .container {
    padding: 10px;
  }
  
  .tab-button {
    flex: 1;
    padding: 12px;
    font-size: 14px;
  }
  
  .team-section {
    padding: 15px;
  }
  
  .table-header,
  .player-item {
    grid-template-columns: 90px 100px 80px;
    gap: 10px;
    padding: 0 10px;
  }
  
  .name-input,
  .number-input {
    width: 100% !important;
    height: 32px;
    padding: 6px 10px;
  }
}

.player-list::-webkit-scrollbar {
  height: 6px;
}

.player-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.player-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.player-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>